<template>
	<view class="contain">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<view class="swiper-item"><image :src="item.img"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="sandList">
			<view class="sandItemImg" v-for="cate in categoryList" :key="cate.id">
				<image :src="cate.img"></image>
				<view>{{ cate.name }}</view>
			</view>
		</view>
		<!-- 近期拍卖日历 -->
		<view class="calendarBox">
			<view class="title">
				<text>近期拍卖日历</text>
				<navigator  url="/subPages/pages/calendarMore/calendarMore" hover-class="none">更多</navigator>
			</view>
			<view class="content">
				<Auction :list="goodsList"></Auction>
			</view>
		</view>
		<!-- 沙石资讯 -->
		<view class="information">
			<view class="title">
				<text>沙石资讯</text>
				<navigator url="/subPages/pages/sandInfo/sandInfo" hover-class="none">更多</navigator>
			</view>
			<view>
				<scroll-view scroll-x="true" style="white-space: nowrap;"> 
					<view style="display: inline-block;margin-right: 10px;">
						<Information :info="infoList"></Information>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 推荐沙石 -->
		<view class="recommended">
			<view class="title">推荐沙石</view>
			<view class="recom-content">
				<Recommended :reco="recommenList"></Recommended>
			</view>
		</view>
	</view>
</template>

<script>
import { getBannerList, getCategoryList, getauctionGoods, getinformation ,recommendedList} from '@/api/home/home.js';
export default {
	// 在頁面中的生命週期使用小程序的，組件中的生命周期建議使用VUE的
	data() {
		return {
			bannerList: {},
			categoryList: {},
			goodsList: {},
			infoList: {},
			recommenList:{}
		};
	},
	onShow() {
		this.refresh();
	},
	methods: {
		refresh() {
			this.fetchBannerList();
			this.fetchCategoryList();
			this.fetchGoodsList();
			this.fetchInformation();
			this.fetchRecommendList()
		},
		// 获取轮播图数据
		async fetchBannerList() {
			let { data } = await getBannerList(this.bannerList);
			this.bannerList = data;
		},
		// 获取分类列表数据
		async fetchCategoryList() {
			let { data } = await getCategoryList(this.categoryList);
			this.categoryList = data;
		},
		//获取近期拍卖商品信息
		async fetchGoodsList() {
			this.goodsList = [];
			let { data } = await getauctionGoods();
			// Object.keys(data) 拿到 数组
			Object.keys(data).forEach(item => {
				this.goodsList.push({
					title: item,
					list: data[item],
					timeStamp: new Date(item).getTime()
				});
			});
			console.log(data);
			//排序商品数据的顺序
			this.goodsList = this.goodsList.sort((a, b) => a.timeStamp - b.timeStamp);
			// goodsList.slice(0,1) 截取数组 前两个数据 
			this.goodsList = this.goodsList.slice(0,1);
		},
		// 获取资讯数据
		async fetchInformation() {
			let { data } = await getinformation(this.infoList);
			// console.log(data);
			this.infoList = data.list;
		},
		// 获取首页 推荐沙石数据
		async fetchRecommendList() {
			let {data} =  await recommendedList(this.recommenList)
			this.recommenList = data.list
			// console.log(data);
		}
	}
};
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}

.contain {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	background-color: #212121;
	font-size: 14px;
}
.banner {
	// margin-top: 24px;
	width: 680rpx;
	height: 320rpx;
}
.swiper-item {
	width: inherit;
	height: inherit;
}
.banner > swiper {
	width: 680rpx;
	height: 320rpx;
	border-radius: 5px;
	will-change: transform;
	box-shadow: 2px 3px 5px #00000030;
	margin: 0 auto;
}
.swiper-item > image {
	width: inherit;
	height: inherit;
}
.sandList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 680rpx;
}
.sandItemImg {
	color: #fff;
	text-align: center;
}
.sandItemImg > image {
	width: 140rpx;
	height: 140rpx;
	margin-top: 30px;
	margin-left: 5px;
	border-radius: 5px;
}
.calendarBox {
	box-sizing: border-box;
	margin: 15px auto;
}
.title {
	display: flex;
	width: 340px;
	height: 34px;
	justify-content: space-between;
	color: #fff;
}
.title > text {
	font-size: 16px;
}
.calendarBox > .content {
	width: 340px;
	min-height: 160px;
	background-color: #323232;
	border-radius: 5px;
	// box-sizing: border-box;
	// overflow: hidden;
}
.calendarBox > .content > .date {
	padding-top: 15px;
	font-size: 16px;
	color: #fff;
	margin-bottom: 8px;
	padding-left: 15px;
}
.information {
	width: 340px;
}
.information > .infoItem {
	margin-right: 10px;
}
.recommended {
	width: 340px;
}
.recom-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: inherit;
}
</style>
